import {
  getPage
} from '../../utils/config';
import api from '../../utils/api';
import {
  http,
  $empty,
  $toast,
  storage,
  Validate
} from '../../utils/utils';
import wxApi from '../../utils/wxApi';
import uploadImage from '../../utils/aliyunoss/uploadAliyun';
const app = getApp();

Page({
  data: {
    // 列表数据
    dataList: [{
        content: "苹果"
      },
      {
        content: "香蕉"
      },
      {
        content: "梨子"
      },
    ],
    // 移动块的id
    moveId: null,
    // 最终停止的位置
    endY: 0,
  },
  onLoad() {
    this.init(this.data.dataList)
  },
  // 重置列表顺序
  init(dataList) {
    // 列表项高度
    const ITEM_HEIGHT = 40
    // 列表项上外边距
    const ITEM_MARGIN_TOP = 14
    let newDataList = dataList.map((item, index) => {
      item.id = index
      // 重置单项的y坐标(组件默认是绝对定位 left:0  top:0 )
      item.y = (ITEM_HEIGHT + ITEM_MARGIN_TOP) * index + ITEM_MARGIN_TOP
      return item
    })

    this.setData({
      dataList: newDataList
    })
  },
  // 移动中-获取移动元素的id,实时获取移动元素的y坐标
  moving(e) {
    this.setData({
      moveId: e.currentTarget.dataset.moveid,
      endY: e.detail.y,
    })
  },
  // 移动后
  moved() {
    let {
      dataList,
      moveId,
      endY
    } = this.data
    let newDataList = JSON.parse(JSON.stringify(dataList))
    console.log('moveId\endY====',moveId,endY)
    console.log('newDataList====',newDataList)
    newDataList[moveId].y = endY
    newDataList = newDataList.sort((a, b) => a.y - b.y)
    this.init(newDataList)
  }
})
